<template>
    <div class="video">
        <div class="video-box">
            <swiper :options="swiperOption" v-if="poster.length>0">
                <!-- slides -->
                <swiper-slide v-for="(item, index) in poster" :key="index"><img :src="item.imgUrl" alt="" class="poster" @click="showVideo(item.videoUrl)" :data-videoUrl="item.videoUrl"></swiper-slide>
                <!-- Optional controls -->
                <div class="btn swiper-button-prev swiper-button-white" slot="button-prev"></div>
                <div class="btn swiper-button-next swiper-button-white" slot="button-next"></div>
            </swiper>
        </div>
        <el-dialog custom-class="video-dialog" :visible.sync="showVideoDialog" width="70%" top="25px" :append-to-body="true"  @close="handleClose">
            <video v-if="showVideoDialog" :src="videoUrl" class="dialog-video" width="100%" autoplay controls nodownload></video>
            <div class="tac" slot="footer">这里是视频描述</div>
        </el-dialog>
    </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    data: function() {
        return {
            poster: [{
                videoUrl: 'http://media.filmwhite.com/20180517002817966.mp4',
                imgUrl: 'http://upload.filmwhite.com/20180519183012259.png'
            }, {
                videoUrl: 'http://media.filmwhite.com/20180519180139533.mp4',
                imgUrl: 'http://upload.filmwhite.com/20180519182418341.png'
            }, {
                videoUrl: '',
                imgUrl: '/img/a.jpg'
            }, {
                videoUrl: '',
                imgUrl: '/img/b.jpg'
            }, {
                videoUrl: '',
                imgUrl: '/img/c.jpg'
            }],
            swiperOption: {
                slidesPerView: 4,
                loop: true,
                allowTouchMove: false,
                pagination: {
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            },
            showVideoDialog: false,
            videoUrl: ''
        }
    },
    components: {
        swiper,
        swiperSlide
    },
    created: function() {
        this.swiperOption.loop = this.poster.length <= 4 ? false : true;
    },
    mounted: function(){
    	var _this = this;
    	// 给父层元素绑定事件
    	document.querySelector('.video-box').addEventListener('click', function(e) {
    	    // 兼容性处理
    	    var event = e || window.event;
    	    var target = event.target || event.srcElement;
    	    // 判断是否匹配目标元素
    	    if (target.nodeName.toLocaleLowerCase() === 'img') {
    	        var src = target.getAttribute('data-videoUrl');
    	        _this.showVideo(src)
    	    }
    	});
    },
    methods: {
        showVideo: function(url) {
        	this.videoUrl = url;
        	this.showVideoDialog = true;
        },
        handleClose: function(){
        	this.videoUrl = '';
        }
    }
}

</script>
<style scoped>
.video{
	height: calc(100vh - 80px);
	position: relative;
}
.video-box {
    width: 1200px;
    height: 500px;
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, .5);
    overflow-x: auto;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.swiper-slide {
    height: 500px;
    overflow: hidden;
}

.poster {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 500px;
    transition: all .3s linear;
    cursor: pointer;
    user-select: none;
    opacity: .8;
}

.poster:hover {
    opacity: 1;
    transform: scale(1.2) rotate(3deg);
    z-index: 9
}

.btn {
	width: 60px;
	height: 60px;
	margin-top: -30px;
    border: none;
    outline: none;
    opacity: .5;
    transition: all .3s linear;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 50%;
}

.btn:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, .8);
}
</style>
